<div class="row">

<div class="col-md-6">
	<h4 class="m-t-xs">
		Button options
	</h4>
	<div class="doc-buttons">
		<a href="#" class="btn btn-s-md btn-default">
			Default
		</a>
		<a href="#" class="btn btn-s-md btn-primary">
			Primary
		</a>
		<a href="#" class="btn btn-s-md btn-success">
			Success
		</a>
		<a href="#" class="btn btn-s-md btn-info">
			Info
		</a>
		<a href="#" class="btn btn-s-md btn-warning">
			Warning
		</a>
		<a href="#" class="btn btn-s-md btn-danger">
			Danger
		</a>
		<a href="#" class="btn btn-s-md btn-dark">
			Dark
		</a>
		<a href="#" class="btn btn-s-md btn-default disabled">
			Disabled
		</a>
	</div>
	<h4 class="m-t">
		Button size
	</h4>
	<p>
		<a href="#" class="btn btn-default btn-lg">
			Large button
		</a>
	</p>
	<p>
		<a href="#" class="btn btn-default">
			Default button
		</a>
	</p>
	<p>
		<a href="#" class="btn btn-default btn-sm">
			Small button
		</a>
	</p>
	<p>
		<a href="#" class="btn btn-default btn-xs">
			Extra small button
		</a>
	</p>
	<h4 class="m-t-lg">
		Button dropdowns
	</h4>
	<p class="text-muted">
		Single button dropdowns
	</p>
	<div class="m-b-sm">
		<div class="btn-group">
			<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
				Action
				<span class="caret">
				</span>
			</button>
			<ul class="dropdown-menu">
				<li>
					<a href="#">
						Action
					</a>
				</li>
				<li>
					<a href="#">
						Another action
					</a>
				</li>
				<li>
					<a href="#">
						Something else here
					</a>
				</li>
				<li class="divider">
				</li>
				<li>
					<a href="#">
						Separated link
					</a>
				</li>
			</ul>
		</div>
		<div class="btn-group">
			<button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
				Action
				<span class="caret">
				</span>
			</button>
			<ul class="dropdown-menu">
				<li>
					<a href="#">
						Action
					</a>
				</li>
				<li>
					<a href="#">
						Another action
					</a>
				</li>
				<li>
					<a href="#">
						Something else here
					</a>
				</li>
				<li class="divider">
				</li>
				<li>
					<a href="#">
						Separated link
					</a>
				</li>
			</ul>
		</div>
	</div>
	<div class="m-b-sm">
		<div class="btn-group">
			<button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
				Action
				<span class="caret">
				</span>
			</button>
			<ul class="dropdown-menu">
				<li>
					<a href="#">
						Action
					</a>
				</li>
				<li>
					<a href="#">
						Another action
					</a>
				</li>
				<li>
					<a href="#">
						Something else here
					</a>
				</li>
				<li class="divider">
				</li>
				<li>
					<a href="#">
						Separated link
					</a>
				</li>
			</ul>
		</div>
	</div>
	<div class="m-b-sm">
		<div class="btn-group">
			<button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
				Action
				<span class="caret">
				</span>
			</button>
			<ul class="dropdown-menu">
				<li>
					<a href="#">
						Action
					</a>
				</li>
				<li>
					<a href="#">
						Another action
					</a>
				</li>
				<li>
					<a href="#">
						Something else here
					</a>
				</li>
				<li class="divider">
				</li>
				<li>
					<a href="#">
						Separated link
					</a>
				</li>
			</ul>
		</div>
	</div>
	<p class="text-muted">
		Split button dropdowns & variation
	</p>
	<div class="m-b-sm">
		<div class="btn-group">
			<button class="btn btn-default">
				Action
			</button>
			<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
				<span class="caret">
				</span>
			</button>
			<ul class="dropdown-menu">
				<li>
					<a href="#">
						Action
					</a>
				</li>
				<li>
					<a href="#">
						Another action
					</a>
				</li>
				<li>
					<a href="#">
						Something else here
					</a>
				</li>
				<li class="divider">
				</li>
				<li>
					<a href="#">
						Separated link
					</a>
				</li>
			</ul>
		</div>
		<div class="btn-group dropup">
			<button class="btn btn-default">
				Action
			</button>
			<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
				<span class="caret">
				</span>
			</button>
			<ul class="dropdown-menu">
				<li>
					<a href="#">
						Action
					</a>
				</li>
				<li>
					<a href="#">
						Another action
					</a>
				</li>
				<li>
					<a href="#">
						Something else here
					</a>
				</li>
				<li class="divider">
				</li>
				<li>
					<a href="#">
						Separated link
					</a>
				</li>
			</ul>
		</div>
	</div>
	<h4 class="m-t-lg">
		Button with icon
	</h4>
	<p>
		<a href="#" class="btn btn-default">
			<i class="fa fa-html5">
			</i>
			Html5
		</a>
		<a href="#" class="btn btn-info">
			<i class="fa fa-css3">
			</i>
			CSS3
		</a>
	</p>
	<p>
		<a href="#" class="btn btn-default btn-lg btn-block">
			<i class="fa fa-bars pull-right">
			</i>
			Block button with icon
		</a>
	</p>
	<p>
		<a href="#" class="btn btn-default btn-block">
			<i class="fa fa-bars pull-left">
			</i>
			Block button with icon
		</a>
	</p>
	<h4 class="m-t-lg">
		Button icon
	</h4>
	<p id="social-buttons">
		<a href="#" class="btn btn-sm btn-icon btn-info">
			<i class="fa fa-twitter">
			</i>
		</a>
		<a href="#" class="btn btn-sm btn-icon btn-success">
			<i class="fa fa-facebook">
			</i>
		</a>
		<a href="#" class="btn btn-sm btn-icon btn-danger">
			<i class="fa fa-google-plus">
			</i>
		</a>
	</p>
	<h4 class="m-t-lg">
		Button icon rounded
	</h4>
	<p id="social-buttons">
		<a href="#" class="btn btn-rounded btn-sm btn-icon btn-default">
			<i class="fa fa-twitter">
			</i>
		</a>
		<a href="#" class="btn btn-rounded btn-sm btn-icon btn-default">
			<i class="fa fa-facebook">
			</i>
		</a>
		<a href="#" class="btn btn-rounded btn-sm btn-icon btn-default">
			<i class="fa fa-google-plus">
			</i>
		</a>
	</p>
	</div>
	<div class="col-md-6">
	<h4 class="m-t-xs">
		Rounded button
	</h4>
	<div class="doc-buttons">
		<a href="#" class="btn btn-s-md btn-default btn-rounded">
			Default
		</a>
		<a href="#" class="btn btn-s-md btn-primary btn-rounded">
			Primary
		</a>
		<a href="#" class="btn btn-s-md btn-success btn-rounded">
			Success
		</a>
		<a href="#" class="btn btn-s-md btn-info btn-rounded">
			Info
		</a>
		<a href="#" class="btn btn-s-md btn-warning btn-rounded">
			Warning
		</a>
		<a href="#" class="btn btn-s-md btn-danger btn-rounded">
			Danger
		</a>
		<a href="#" class="btn btn-s-md btn-dark btn-rounded">
			Dark
		</a>
		<a href="#" class="btn btn-s-md btn-default btn-rounded disabled">
			Disabled
		</a>
	</div>
	<h4 class="m-t-lg">
		Button groups
	</h4>
	<div class="m-b-sm">
		<div class="btn-group">
			<button type="button" class="btn btn-default">
				Left
			</button>
			<button type="button" class="btn btn-default">
				Middle
			</button>
			<button type="button" class="btn btn-default">
				Right
			</button>
		</div>
	</div>
	<p class="text-muted">
		Vertical button groups
	</p>
	<div class="btn-group-vertical m-b-sm">
		<button type="button" class="btn btn-default">
			Top
		</button>
		<button type="button" class="btn btn-default">
			Middle
		</button>
		<button type="button" class="btn btn-default">
			Bottom
		</button>
	</div>
	<p class="text-muted">
		Nested button groups
	</p>
	<div class="btn-group m-b-sm">
		<button type="button" class="btn btn-default">
			1
		</button>
		<button type="button" class="btn btn-success">
			2
		</button>
		<button type="button" class="btn btn-default">
			3
		</button>
		<div class="btn-group">
			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
				Dropdown
				<span class="caret">
				</span>
			</button>
			<ul class="dropdown-menu">
				<li>
					<a href="#">
						Dropdown link
					</a>
				</li>
				<li>
					<a href="#">
						Dropdown link
					</a>
				</li>
				<li>
					<a href="#">
						Dropdown link
					</a>
				</li>
			</ul>
		</div>
	</div>
	<p class="text-muted">
		Justified button groups
	</p>
	<div class="m-b-sm">
		<div class="btn-group btn-group-justified">
			<a href="#" class="btn btn-primary">
				Left
			</a>
			<a href="#" class="btn btn-info">
				Middle
			</a>
			<a href="#" class="btn btn-success">
				Right
			</a>
		</div>
	</div>
	<p class="text-muted">
		Multiple button groups
	</p>
	<div class="btn-toolbar">
		<div class="btn-group">
			<button type="button" class="btn btn-default">
				1
			</button>
			<button type="button" class="btn btn-default active">
				2
			</button>
			<button type="button" class="btn btn-default">
				3
			</button>
			<button type="button" class="btn btn-default">
				4
			</button>
		</div>
		<div class="btn-group">
			<button type="button" class="btn btn-default">
				5
			</button>
			<button type="button" class="btn btn-default">
				6
			</button>
			<button type="button" class="btn btn-default">
				7
			</button>
		</div>
		<div class="btn-group">
			<button type="button" class="btn btn-default">
				8
			</button>
		</div>
	</div>
	<h4 class="m-t-lg">
		Button components
	</h4>
	<p class="text-muted">
		<span>
			There are a few easy ways to quickly get started with Bootstrap, each
			one ...
		</span>
		<span class="text-muted hide" id="moreless">
			appealing to a different skill level and use case. Read through to see
			what suits your particular needs.
		</span>
	</p>
	<p>
		<button href="#moreless" class="btn btn-sm btn-default" data-toggle="class:show">
			<i class="fa fa-plus text">
			</i>
			<span class="text">
				More
			</span>
			<i class="fa fa-minus text-active">
			</i>
			<span class="text-active">
				Less
			</span>
		</button>
	</p>
	<p>
		<button class="btn btn-default" id="btn-1" href="#btn-1" data-toggle="class:btn-success">
			<i class="fa fa-cloud-upload text">
			</i>
			<span class="text">
				Upload
			</span>
			<i class="fa fa-check text-active">
			</i>
			<span class="text-active">
				Success
			</span>
		</button>
		<button class="btn btn-default" data-toggle="button">
			<i class="fa fa-heart-o text">
			</i>
			<i class="fa fa-heart text-active text-danger">
			</i>
		</button>
		<button class="btn btn-default" data-toggle="button">
			<span class="text">
				<i class="fa fa-thumbs-up text-success">
				</i>
				25
			</span>
			<span class="text-active">
				<i class="fa fa-thumbs-down text-danger">
				</i>
				10
			</span>
		</button>
		<button class="btn btn-success" data-toggle="class:show inline" data-target="#spin"
		data-loading-text="Saving...">
			Save
		</button>
		<i class="fa fa-spin fa-spinner hide" id="spin">
		</i>
	</p>
	<div class="m-b-sm">
		<div class="btn-group" data-toggle="buttons">
			<label class="btn btn-sm btn-info active">
				<input type="radio" name="options" id="option1">
				<i class="fa fa-check text-active">
				</i>
				Male
			</label>
			<label class="btn btn-sm btn-success">
				<input type="radio" name="options" id="option2">
				<i class="fa fa-check text-active">
				</i>
				Female
			</label>
			<label class="btn btn-sm btn-primary">
				<input type="radio" name="options" id="option3">
				<i class="fa fa-check text-active">
				</i>
				N/A
			</label>
		</div>
	</div>
	<div class="m-b-sm">
		<div class="btn-group" data-toggle="buttons">
			<label class="btn btn-sm btn-default">
				<input type="checkbox" name="options" id="option1">
				option1
			</label>
			<label class="btn btn-sm btn-default">
				<input type="checkbox" name="options" id="option2">
				option2
			</label>
		</div>
	</div>
	<h5 class="m-t-lg">
		Select Button
	</h5>
	<div class="btn-group m-r">
		<button data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle">
			<span class="dropdown-label">
				Option1
			</span>
			<span class="caret">
			</span>
		</button>
		<ul class="dropdown-menu dropdown-select">
			<li class="active">
				<a href="#">
					<input type="radio" name="d-s-r" checked="">
					Option1
				</a>
			</li>
			<li>
				<a href="#">
					<input type="radio" name="d-s-r">
					Option2
				</a>
			</li>
			<li>
				<a href="#">
					<input type="radio" name="d-s-r">
					Option3
				</a>
			</li>
			<li class="disabled">
				<a href="#">
					<input type="radio" name="d-s-r" disabled="">
					I'm disabled
				</a>
			</li>
		</ul>
	</div>
	<h4 class="m-t-lg">
		<a href="#" class="pull-right text-sm" data-toggle="class:btn-rounded"
		data-target="#social-buttons a">
			Toggle
		</a>
		Social buttons
	</h4>
	<p id="social-buttons">
		<a href="#" class="btn btn-rounded btn-sm btn-twitter">
			<i class="fa fa-fw fa-twitter">
			</i>
			Twitter
		</a>
		<a href="#" class="btn btn-rounded btn-sm btn-facebook">
			<i class="fa fa-fw fa-facebook">
			</i>
			Facebook
		</a>
		<a href="#" class="btn btn-rounded btn-sm btn-gplus">
			<i class="fa fa-fw fa-google-plus">
			</i>
			Google+
		</a>
	</p>
</div>

</div>